<template>
    <doc-main>
        <div class="col-lg-12">
            <h4>Carousel 轮播</h4>
            <h5>概述</h5>
            <p>轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。除此之外，内容也是足够灵活的，可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。</p>
            <h5>如何使用:</h5>
            <p>使用 <code>Carousel</code> 组件，指定图标对应的options属性，示例代码：</p>
            <code-parsing language="js hljs javascript">{{code}}</code-parsing>
            <h5>效果:</h5>
            <div style="height: 400px">
                <carousel :options="options">
                    <carousel-item v-for="key in items" :key="key" style="width: 300px">
                        <div style="height: 100%; width: 100%;background-color: whitesmoke" class="text-center">
                            {{key}}
                        </div>
                    </carousel-item>
                </carousel>
            </div>
            <div>
                <h5>参数</h5>
                <table class="table table-bordered">
                    <thead>
                    <tr>
                        <th>属性</th>
                        <th>说明</th>
                        <th>类型</th>
                        <th>默认值</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>options</td>
                        <td>Api: <a href="http://idangero.us/swiper/api/#.WUUK9WiGNFE" target="_blank">Siwper</a></td>
                        <td>Object</td>
                        <td>-</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </doc-main>
</template>

<script>
    import DocMain from '../layout/DocMain.vue';
    import Carousel from '../../../js/components/swiper/Carousel';
    import CarouselItem from '../../../js/components/swiper/CarouselItem';
    import CodeParsing from '../layout/CodeParsing';
    import { carousel } from '../../html/data';
    export default {
        data () {
            return {
                code: carousel,
                options: {
                    pagination: '.swiper-pagination',
                    nextButton: '.swiper-button-next',
                    prevButton: '.swiper-button-prev',
                    scrollbar: '.swiper-scrollbar',
                    slidesPerView: 'auto',
                    paginationClickable: true,
                    spaceBetween: 30,
                    autoplay: 2500,
                    autoplayDisableOnInteraction: false
                },
                items: []
            };
        },
        components: {
            CodeParsing,
            CarouselItem,
            Carousel,
            DocMain
        },
        mounted () {
            setTimeout(() => {
                this.items = ['Item', 'Menu', 'Class', 'Object'];
            }, 2000);
        }
    };
</script>
